.activeCode {
  @apply w-full h-full flex flex-col items-center justify-center;

  .title {
    @apply text-white text-lg;
    line-height: 1.125rem;
    &.titleNotLogin{
      @apply text-white-80 ;
    }
  }

  .codeBox {
    height: 3.75rem;
    margin-top: 2.875rem ;
    .span {
      @apply inline-flex h-full items-center rounded font-medium text-2xl leading-6 text-white cursor-text ;
      width: 7.5rem;
      background: #242424;
      font-family: OPPOSans;
      padding:0 1.375rem;
      &:not(:first-child){
        @apply ml-5 ;
      }
      letter-spacing: 0.2em;
      border: 1px solid rgba(255, 255, 255, 0.2);
      .cursor{
        @apply inline bg-transparent h-4 ;
        width: 1px;
        margin-left: 2px;
        &.focus{
          animation: blink 1s steps(1) infinite; 
        }
      }
      @keyframes blink{
        50% { 
          @apply bg-white ;
         }
      }
    }
    .input{
      @apply w-0 h-0 overflow-hidden ;
    }
  }

  .error {
    @apply text-base leading-4 mt-5;
    color: #FF3E3E;
  }

  .btn {
    @apply  text-white h-10 bg-white-40 bg-theme cursor-pointer ;
    margin-top: 6.25rem;
    width: 8.75rem;
    &.btnLogin{
      @apply cursor-pointer ;
      margin-top:1.875rem;
      background: linear-gradient(90deg, #FF651D 0%, #FFB521 100%);
    }
  }
}

@media screen and (max-width:767px) {
  .activeCode {
    @apply justify-start ;
  
    .title {
      @apply text-base leading-4 ;
    }
  
    .codeBox {
      @apply flex justify-center ;
      height:2.875rem;
      margin-top: 1.875rem ;
      .span {
        @apply text-xl shrink-0 w-20 ;
        padding:0 0.8rem;
        &:not(:first-child){
          @apply ml-2 ;
        }
        letter-spacing: 0.1em;
      }
    }
  
    .error {
      @apply text-xs 
    }
  
    .btn {
      @apply mt-4 ;
      width:16.25rem;
      margin-bottom:12.5rem;
    }
  }
  
}